import BasicMapUtils from './BasicMapUtils'

const ol = window.ol
const iconSrc = require('assets/images/situational-awareness/bus-station-icon.png')
const iconActiveSrc = require('assets/images/situational-awareness/bus-station-icon-active.png')
const icon = iconSrc
const markerIconActive = new ol.style.Style({
  image: new ol.style.Icon({
    src: iconActiveSrc
  })
})
const markerIcon = new ol.style.Style({
  image: new ol.style.Icon({
    src: icon
  })
})
// const caseEventList = [
//   {
//     "id":"88181116102507401000",
//     "lat":0.0,
//     "lon":0.0,
//     "lonLat":[
//       0.0,
//       0.0
//     ],
//     "routeName":"B25路下行",
//     "stationName":"玉洞站(下行)",
//     "stationTypeName":""
//   },
//   {
//     "id":"2021004104",
//     "lat":22.836708,
//     "lon":108.248577,
//     "lonLat":[
//       108.248577,
//       22.836708
//     ],
//     "routeName":"53路下行",
//     "stationName":"清川桥北",
//     "stationTypeName":""
//   },
//   {
//     "id":"2021020005",
//     "lat":22.841208,
//     "lon":108.260329,
//     "lonLat":[
//       108.260329,
//       22.841208
//     ],
//     "routeName":"53路上行",
//     "stationName":"大学大岭路口",
//     "stationTypeName":""
//   },
//   {
//     "id":"2021013132",
//     "lat":22.836948,
//     "lon":108.303365,
//     "lonLat":[
//       108.303365,
//       22.836948
//     ],
//     "routeName":"71路下行",
//     "stationName":"秀灵路南",
//     "stationTypeName":""
//   },
//   {
//     "id":"55160920164647599001",
//     "lat":22.854126,
//     "lon":108.267993,
//     "lonLat":[
//       108.267993,
//       22.854126
//     ],
//     "routeName":"53路上行,B14路下行",
//     "stationName":"科园东五路口(下行)",
//     "stationTypeName":""
//   },
//   {
//     "id":"2021010113",
//     "lat":22.869758,
//     "lon":108.296211,
//     "lonLat":[
//       108.296211,
//       22.869758
//     ],
//     "routeName":"B603路上行",
//     "stationName":"安吉路中",
//     "stationTypeName":""
//   },
//   {
//     "id":"85181204144943770000",
//     "lat":0.0,
//     "lon":0.0,
//     "lonLat":[
//       0.0,
//       0.0
//     ],
//     "routeName":"99路下行",
//     "stationName":"银海玉洞路口(下行)",
//     "stationTypeName":""
//   },
//   {
//     "id":"2021017921",
//     "lat":22.684563,
//     "lon":108.379805,
//     "lonLat":[
//       108.379805,
//       22.684563
//     ],
//     "routeName":"112路下行",
//     "stationName":"银海平乐路口",
//     "stationTypeName":""
//   },
//   {
//     "id":"55161224180040816000",
//     "lat":22.850528,
//     "lon":108.389755,
//     "lonLat":[
//       108.389755,
//       22.850528
//     ],
//     "routeName":"BK4路(下行)",
//     "stationName":"长虹翠竹路口东站（下行）",
//     "stationTypeName":""
//   },
//   {
//     "id":"55200120164834958001",
//     "lat":22.806248,
//     "lon":108.324938,
//     "lonLat":[
//       108.324938,
//       22.806248
//     ],
//     "routeName":"B73路上行",
//     "stationName":"区医院（上行）",
//     "stationTypeName":""
//   }
// ]

let overlay = ''
class BusStation extends BasicMapUtils {
  constructor(thisVue) {
    super()
    this.caseEventList = []
    this.thisVue = thisVue
    this.mapMarker = []
    this.listenerHandle = null
    // this.initBusStation()
  }

  initBusStation() {
    this.mapView.animate({ zoom: 15.1 })
    this.caseEventList = this.thisVue.getStationList()
    this.removeLayers()
    this.addMarker()
    this.addEventListener()
  }

  addEventListener () {
    if (this.listenerHandle) {
      ol.Observable.unByKey(this.listenerHandle)
    }
    this.listenerHandle = this.map.on('click', e => {
      const feature = this.map.forEachFeatureAtPixel(e.pixel, feature => {
        return feature
      })
      overlay && overlay.setPosition(undefined)
      this.mapMarker.forEach(item => {
        item.markerFeature.setStyle(markerIcon)
      })
      if (feature) {
        if (feature.get('userData').type === 'marker') {
          // console.log('bus-station-data', feature.get('userData'))
          this.thisVue.setStationData(feature.get('userData').id)
          overlay = this.createOverlay({
            htmlElement: document.querySelector('.bus-station-dialog'),
            position: e.coordinate
          })
          this.map.addOverlay(overlay)
          feature.setStyle(markerIconActive)
        }
      }
    })
  }
  //
  addMarker() {
    this.caseEventList.forEach(item => {
      const centerPoint = new ol.geom.Point(item.lonLat)
      this.coordTransform.convertGeoIntoMap(centerPoint)
      const markerObject = this.createMarker({ x: centerPoint.getCoordinates()[0], y: centerPoint.getCoordinates()[1], icon, userData: item, anchor: [0.5, 0.5] })
      this.mapMarker.push(markerObject)
      this.map.addLayer(markerObject.markerLayer)
    })
  }
  // 事件触发高亮选中站点
  setActiveMarker (e) {
    if (this.caseEventList.length > 0) {
      this.caseEventList.forEach(item => {
        if (e.id === item.id) {
          const centerPoint = new ol.geom.Point(item.lonLat)
          this.coordTransform.convertGeoIntoMap(centerPoint)
          this.mapView.animate({ center: centerPoint.getCoordinates() })
          overlay && overlay.setPosition(undefined)
          this.mapMarker.forEach(item => {
            item.markerFeature.setStyle(markerIcon)
          })
          this.thisVue.setStationData(e.id)
          overlay = this.createOverlay({
            htmlElement: document.querySelector('.bus-station-dialog'),
            position: centerPoint.flatCoordinates
          })
          this.map.addOverlay(overlay)
          this.mapMarker[e.index].markerFeature.setStyle(markerIconActive)
        }
      })
    }
  }

  // 重置高亮显示的点
  resetMarker () {
    overlay && overlay.setPosition(undefined)
    this.mapMarker.forEach(item => {
      item.markerFeature.setStyle(markerIcon)
    })
  }

  removeLayers () {
    if (this.mapMarker.length > 0) {
      this.mapMarker.forEach(item => {
        this.map.removeLayer(item.markerLayer)
      })
      this.mapMarker = []
    }
  }
}

export default BusStation
